<template>
  <div class="system">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="短信配置" name="sms">
        <div class="form">
          <div class="title">
            <p><span>短信配置</span></p>
          </div>
          <el-form
            :model="smsRuleForm"
            :rules="smsRules"
            ref="smssmsRuleForm"
            label-width="120px"
            class="demo-smsRuleForm"
          >
            <el-form-item label="站点logo">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleSuccess"
                :before-upload="beforeUpload"
              >
                <el-input
                  v-model="smsRuleForm.logo"
                  class="ip-inner"
                ></el-input>
                <el-button size="small" type="primary">上传LOGO</el-button>
                <div slot="tip" class="el-upload__tip">
                  仅支持上传.ico格式文件
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item label="网站名称">
              <el-input v-model="smsRuleForm.website_name"></el-input>
            </el-form-item>
            <el-form-item label="网站简称">
              <el-input v-model="smsRuleForm.website_short"></el-input>
            </el-form-item>
            <el-form-item label="网站关键字">
              <el-input
                v-model="smsRuleForm.website_keyword"
                aria-placeholder="多个关键词用英文,号隔开"
              ></el-input>
            </el-form-item>
            <el-form-item label="LOGO图片URL">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleSuccessUrl"
                :before-upload="beforeUploadUrl"
              >
                <el-input v-model="smsRuleForm.Img" class="ip-inner"></el-input>
                <el-button size="small" type="primary">上传图片</el-button>
              </el-upload>
            </el-form-item>
            <el-form-item label="底部版权信息">
              <el-input v-model="smsRuleForm.copyright"></el-input>
            </el-form-item>
            <el-form-item label="底部版权url">
              <el-input
                v-model="smsRuleForm.copyright_url"
                aria-placeholder="例如： https://www.baidu.com"
              ></el-input>
            </el-form-item>
            <el-form-item label="登录页背景图">
              <el-upload
                class="upload-demo"
                action="https://jsonplaceholder.typicode.com/posts/"
                :show-file-list="false"
                :on-success="handleSuccessLogin"
                :before-upload="beforeUploadLogin"
              >
                <el-input
                  v-model="smsRuleForm.login_background"
                  class="ip-inner"
                ></el-input>
                <el-button size="small" type="primary">上传图片</el-button>
                <div slot="tip" class="el-upload__tip">建议尺寸1920*1080</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="开启注册功能">
              <el-radio-group v-model="smsRuleForm.is_forbid_reg">
                <el-radio-button label="1">是</el-radio-button>
                <el-radio-button label="2">否</el-radio-button>
              </el-radio-group>
            </el-form-item>
            <div class="footer">
              <el-button type="primary" @click="onSubmit('smsRuleForm')"
                >保存</el-button
              >
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="基础配置" name="basic">
        <div class="form">
          <div class="title">
            <p>
              <span>基础配置(阿里云)</span
              >用于发送(注册、重置密码)短信验证码、注册结果短信通知
            </p>
          </div>
          <el-form
            :model="smsRuleForm"
            :rules="smsRules"
            ref="smsRuleForm"
            label-width="150px"
            class="demo-smsRuleForm"
          >
            <el-form-item label="AccessKeyId">
              <el-input v-model="smsRuleForm.access_key_id"></el-input>
            </el-form-item>
            <el-form-item label="AccessKeySecret">
              <el-input v-model="smsRuleForm.access_key_secret"></el-input>
            </el-form-item>
            <el-form-item label="短信签名">
              <el-input v-model="smsRuleForm.sms_signature"></el-input>
            </el-form-item>
            <el-form-item label="验证码模板ID">
              <el-input v-model="smsRuleForm.sms_template_id"></el-input>
            </el-form-item>
            <el-form-item label="注册审核成功模板ID">
              <el-input
                v-model="smsRuleForm.sms_reg_audit_success"
                aria-placeholder="用于用户注册审核成功的通知"
              ></el-input>
            </el-form-item>
            <el-form-item label="注册审核失败模板ID">
              <el-input
                v-model="smsRuleForm.sms_reg_audit_fail"
                aria-placeholder="用于用户注册审核失败的通知"
              ></el-input>
            </el-form-item>

            <div class="footer">
              <el-button type="primary" @click="onSubmit('smsRuleForm')"
                >保存</el-button
              >
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane label="oss配置" name="oss">
        <div class="form">
          <div class="title">
            <p>
              <span>基础配置(阿里云)</span>
            </p>
          </div>
          <el-form
            :model="smsRuleForm"
            :rules="smsRules"
            ref="smsRuleForm"
            label-width="170px"
            class="demo-smsRuleForm"
          >
            <el-form-item label="存储位置">
              <el-radio-group v-model="smsRuleForm.radio">
                <!--  <el-radio label="1" border>本地存储</el-radio> -->
                <el-radio label="2" border>阿里云oss</el-radio>
                <!-- <el-radio label="3" border>腾讯云cos</el-radio>
                <el-radio label="4" border>七牛云存储</el-radio> -->
              </el-radio-group>
            </el-form-item>
            <el-form-item label="存储空间名称(bucket)">
              <el-input v-model="smsRuleForm.bucket"></el-input>
            </el-form-item>
            <el-form-item label="Endpoint或自定义域名">
              <el-input v-model="smsRuleForm.endpoint"></el-input>
              <div class="examples">
                示例：http://oss-xx-xxx-1.aliyunce.com或http：//mydomain.com
              </div>
            </el-form-item>
            <el-form-item label="Access Key ID">
              <el-input v-model="smsRuleForm.oss_access_key"></el-input>
            </el-form-item>
            <el-form-item label="Access Key Secret">
              <el-input v-model="smsRuleForm.oss_access_secret"></el-input>
            </el-form-item>
            <el-form-item label="图片样式接口（选填）">
              <el-input v-model="smsRuleForm.file_example"></el-input>
              <div class="examples">示列: ?x-oss-stlyle/stylename</div>
            </el-form-item>
            <div class="footer">
              <el-button type="primary" @click="onSubmit('smsRuleForm')"
                >保存</el-button
              >
            </div>
          </el-form>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { Sysshow, Sysupdate } from "../../api/jurisdiction/index";
export default {
  data() {
    return {
      activeName: "sms",
      //短信配置
      smsRuleForm: {},
      smsRules: {},
      //基础配置
      smsRuleForm: {},
      smsRules: {},
      //oss配置
      smsRuleForm: {},
      smsRules: {},
    };
  },
  methods: {
    async loadData() {
      let res = await Sysshow();
      console.log(res);
      this.smsRuleForm = res.data.data;
    },
    handleClick(tab, event) {
      /*  console.log(tab, event); */
    },

    //logo上传
    handleSuccess(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
      this.smsRuleFormCompanyFirst.logo = file.name;
    },
    beforeUpload(file) {
      const isJPG = file.type === "icon";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传文件只能是.icon格式!");
      }

      return isJPG;
    },
    //url图片路径上传
    handleSuccessUrl(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
      this.smsRuleFormCompanyFirst.Img = file.name;
    },
    beforeUploadUrl(file) {
      const isJPG = file.type === "image/jpeg/png";
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 jpg/jpeg/png 格式!");
      }
      return isJPG;
    },
    //登陆页面图片上传
    handleSuccessLogin(response, file, fileList) {
      console.log(response);
      console.log(file);
      console.log(fileList);
      this.smsRuleFormCompanyFirst.LoginImg = file.name;
    },
    beforeUploadLogin(file) {
      const isJPG = file.type === "image/jpeg/png";
      if (!isJPG) {
        this.$message.error("上传头像图片只能是 jpg/jpeg/png 格式!");
      }
      return isJPG;
    },
    //保存
    onSubmit(formName) {
      console.log(this.smsRuleForm);
      this.$refs[formName].validate(async (valid) => {
        console.log(valid);
        if (valid) {
          let res = await Sysupdate(this.smsRuleForm);
          console.log(res);
          if (res.data.code === 200) {
            this.$message({
          showClose: true,
            duration: 3000,
              message: res.data.msg,
              type: "success",
            });
            this.loadData();
          } else {
            this.$message({
          showClose: true,
            duration: 3000,
              message: res.data.msg,
              type: "error",
            });
          }
        }
      });
    },
  },
  created() {
    this.loadData();
  },
};
</script>

<style scoped lang="less">
/deep/.el-tabs__nav {
  width: 100%;
}
.el-upload__tip {
  margin-top: -3px;
}
/deep/.el-tabs__item {
  text-align: center;
  width: 30%;
}
.el-form-item {
  margin-bottom: 18px;
}
.form {
  background-color: #fff;
  padding: 15px 15px 15px 0;
  border-radius: 5px;
}
.demo-smsRuleForm {
  width: 44%;
  margin-left: 28%;
}
.ip-inner {
  width: 73% !important;
}
.el-button--primary {
  margin-left: -9px;
  padding: 13px 9px;
  width: 79px;
}
/deep/.el-input__inner {
  height: 39px;
}
.el-input {
  width: 279px;
}

.el-radio-button {
  margin: -2px 35px;
}
/deep/.el-radio-button__inner {
  border-left: 1px solid #dcdfe6;
  border-radius: 5px 5px 5px 5px !important;
}
.title {
  p {
    font-size: 12px;
    span {
      padding-left: 10px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}
.el-radio.is-bordered {
  padding: 5px 5px 5px 3px;
  height: 28px;
}
.el-radio-group {
  display: flex;
  margin-top: 8px;
}
.el-radio {
  margin-right: 2px;
}
.examples {
  color: #ff9d2d;
  font-size: 12px;
}
.footer {
  .el-button {
    margin-left: 24%;
    padding: 13px 12px;
    width: 160px;
    margin-top: 30px;
  }
}
</style>